<template>
  <el-dialog
    :visible.sync="isShow"
    class="dialog-detail"
    @close="handleClose"
    center
    top="14vh"
    width="756px"
    :fullscreen="fullscreen"
  >
    <div id="echartDeep" class="flex-f flex-c" style="width: 740px;height: 400px;"></div>
  </el-dialog>
</template>
<script>
import * as echarts from "echarts";
export default {
  name: "deepEchartBar",
  // components:{EnjoySelectUser,EnjoySelectDeptTree,FileUploadInput},
  props: {
    params:[Object],
    visible: {
      type: Boolean,
      default: false,
    },
    //   data:Object,
    //   type:[String,Number] //1:新增  2：编辑 3：查看
  },
  mounted() {
    // this.renderEchart();
    console.log(this);
  },
  watch: {
    visible(val) {
      if (val) {
        // this.renderEchart()
        // this.$nextTick(() => {
        //     let echartColumnDom = document.getElementById('deepData')
        // console.log(echartColumnDom)
        // this.myChart = echarts.init(echartColumnDom);
        //     this.myChart.setOption(this.option);
        // })
        //   this.getList();
      }
    },
  },
  computed: {
    isShow: {
      get() {
        return this.visible;
      },
      set() {},
    },
    headerTitle() {
      return "签名";
    },
  },
  data() {
    return {
      myChart: null,
      option: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Direct",
            type: "bar",
            barWidth: "60%",
            data: [10, 52, 200, 334, 390, 330, 220],
          },
        ],
      },
      isCrop: false,
      lineWidth: 6,
      passModel: [],
      lineColor: "black",
      bgColor: "rgba(230,230,230,0.5000)",
      loading: false,
      fullscreen: false,
      deviceOptions: undefined,
      factoryOptions: undefined,
      dialogForm: {},
      queryParams: {
        dateType: "1",
        factoryCode: [],
        startTime: "2023-05-01",
        endTime: "2023-06-30",
      },
      // 表单校验
      rules: {
        // aaa: [
        //   { required: true, message: "厂区类型不能为空", trigger: "blur" }
        // ],
      },
    };
  },
  methods: {
    renderEchart() {
      this.$nextTick(() => {
        let echartColumnDom = document.getElementById("deepData");
        console.log(echartColumnDom);
        let myChart = echarts.init(echartColumnDom);
        myChart.setOption(this.option);
      });
    },
    handleClose(done) {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style scoped lang="scss">
.dialog-detail {
  /*斑马纹*/
  ::v-deep .el-table--enable-row-hover {
    tr:hover td.el-table__cell {
      background-color: transparent !important;
    }
  }
  ::v-deep .el-table--striped .el-table__body {
    .el-table__cell {
      border: none;
    }

    tr.el-table__row--striped {
      td.el-table__cell {
        background-color: rgba(255, 255, 255, 0.1) !important;
        border: none;
      }
    }
  }
  ::v-deep .el-dialog {
    overflow: visible;
  }
  ::v-deep .el-table__empty-text {
    color: white;
  }
  ::v-deep .el-table {
    border: none;
    // background-color: rgba(255, 255, 255, 0.1);
    &:before {
      height: 0;
    }
    tr {
      background-color: transparent;
      .cell {
        color: white;
      }
    }
    th {
      background-color: transparent !important;
      border: none;
    }
  }
  .dialog-close {
    position: absolute;
    top: -32px;
    right: -2px;
    opacity: 0.95;
    &:hover {
      cursor: pointer;
    }
  }

  ::v-deep .el-dialog__header {
    // display: none;
    background: rgb(0,21,82);
    border:none;
  }
  ::v-deep .el-dialog__body {
    display: flex;
    flex: 1 1 0%;
    height: 400px;
    padding: 0 8px;
    background: rgb(0,21,82);
    // box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.5);
    // border-radius: 4px;
  }
}
#echartDeep{
  &> div{
    width: 100% !important;
    height: 100% !important;
  }
 &> canvas{
    width: 100% !important;
    height: 100% !important;
  }
}
</style>
